<template>
  <div class="roll">
    <!-- <roll-tabs ref="tabs" @change="getRoomList"></roll-tabs> -->
    <roll-handler
      ref="rollHandler"
      @create="isShowCreateRoomDialog = true"
      @fetch="getRoomList"
      @search="getRoomList"
    ></roll-handler>
    <room-list :list-data="listData" v-show="!loading.list"></room-list>
    <create-room-dialog
      v-model="isShowCreateRoomDialog"
      @close="isShowCreateRoomDialog = false"
      @refresh="getRoomList"
    ></create-room-dialog>
    <!-- loading -->
    <div class="roll-loading justify-center align-center" v-show="loading.list">
      <i class="el-icon-loading mr-2"></i>
      正在加载中
    </div>
    <!-- error -->
    <div
      class="roll-loading d-flex justify-center align-center"
      v-if="!listData.length && !loading.list"
    >
      <el-result icon="info">
        <template #title>
          <span>暂无数据</span>
        </template>
      </el-result>
    </div>

    <div class="d-flex my-5 justify-center">
      <el-pagination
        :page-size="query.page_size"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="onPageChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, reactive } from "vue";
import RollTabs from "./components/RollTabs.vue";
import RollHandler from "./components/RollHandler.vue";
import RoomList from "./components/RoomList.vue";
import { RollService } from "@/services/RollService";
import CreateRoomDialog from "./components/CreateRoomDialog.vue";
import { RoomItem } from "@/types/roll";
import { processImageUrl, processRoomItem } from "@/utils";
import { useStore } from "@/store";

export default defineComponent({
  setup() {
    const listData: RoomItem[] = [];
    const store = useStore();

    return {
      listData: ref(listData),
      total: ref(0),
      isShowCreateRoomDialog: ref(false),
      token: computed(() => store.getters.token),
      loading: reactive({
        list: false,
      }),
      lastRequestTimestamp: -1,
      error: ref(false),
      query: reactive({
        page: 1,
        page_size: 40,
      })
    };
  },

  components: {
    RollTabs,
    RollHandler,
    RoomList,
    CreateRoomDialog,
  },

  methods: {
    getRoomList() {
      const data = this.getData();

      this.loading.list = true;
      const requestTimestamp = (this.lastRequestTimestamp = Date.now());

      RollService.getRoomList(data.formData, data.token, this.query)
        .then((res) => {
          if (requestTimestamp !== this.lastRequestTimestamp) {
            return;
          }

          const { list, total } = res.data.data;
          const _list = list.map(processRoomItem);

          this.listData = _list;
          this.total = total;
        })
        .finally(() => {
          this.loading.list = false;
        });
    },

    getData() {
      const handlerRef = this.$refs.rollHandler as any;

      const handlerData = handlerRef.getData();

      return {
        formData: {
          ...handlerData.formData,
          room_type: -1,
          sort: "prize_pool",
          order: "desc",
        },

        token: handlerData.token,
      };
    },

    onPageChange() {
      this.query.page++;
      this.getRoomList();
    }
  },

  mounted() {
    this.getRoomList();
  },
});
</script>

<style lang="scss">
.roll {
  width: 80%;
  max-width: 1500px;
  margin: 6rem auto 0 auto;
}

.roll-loading {
  font-size: #fff;
  min-height: 300px;
  font-size: 20px;
  display: flex;
}

@media screen and (max-width: 768px) {
  .roll {
    width: 95%;
  }

  .roll-loading {
    min-height: 100px;
  }
}
</style>
